<template>
	<div class="header-wrapper">
		<img class="logo" :src="logoUrl" @click="$router.push({ name: 'Home' })" />
		<img
			class="logo-xs"
			:src="logoUrlXs"
			@click="$router.push({ name: 'Home' })"
		/>
		<el-menu
			:default-active="activeIndex"
			class="top-menu-list"
			mode="horizontal"
			router
		>
			<el-menu-item index="Home" :route="{ name: 'Home' }">首页</el-menu-item>
			<el-menu-item
				index="File"
				:route="{ name: 'File', query: { fileType: 0 ,fileDeptName: 'person'} }"
				>云盘 </el-menu-item
			>
			<template v-if="isLogin">
				<el-submenu
					class="user-exit-submenu"
					index="User"
					v-if="screenWidth <= 768"
				>
					<template slot="title" :route="{name: 'Index'}">
						<img :src="avatar" class="user-avatar">
						<span>{{ name }}</span>
					</template>
					<el-menu-item @click="logout()">退出</el-menu-item>
				</el-submenu>
				<template v-else>
					<!-- 为了和其他菜单样式保持一致，请一定要添加类名 el-menu-item -->
					<div class="el-menu-item exit" @click="logout()">退出</div>
					<div class="el-menu-item username" v-show="isLogin" @click="index()">
						<img :src="avatar" class="user-avatar"><span>{{ name }}</span>
					</div>
				</template>
			</template>
			<!-- 生产环境 -->
			<el-menu-item
				class="login external-link"
				v-if="isProductEnv"
				v-show="!isLogin"
			>
				<router-link class="link-type" :to="'/login'">登录</router-link>
			</el-menu-item>
			<!-- 开发环境 -->
			<el-menu-item
				class="login"
				index="Login"
				:route="{ name: 'Login' }"
				v-else
				v-show="!isLogin"
				>
				<router-link class="link-type" :to="'/login'">登录</router-link>
			</el-menu-item>
			<!-- 生产环境 -->
			<el-menu-item
				class="register external-link"
				v-if="isProductEnv"
				v-show="!isLogin"
			>
				<div style="float: right;" v-if="register">
						<router-link class="link-type" :to="'/register'">注册</router-link>
				</div>
			</el-menu-item>
			<!-- 开发环境 -->
			<el-menu-item
				class="register"
				v-else
				v-show="!isLogin && register"
				index="Register"
				:route="{ name: 'Register' }"
				>注册</el-menu-item
			>
		</el-menu>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import {getConfig} from "@/api/system/config"

export default {
	name: 'Header',
	data() {
		return {
			logoUrl: require('@/assets/images/common/logo_header_gduf.png'),
			logoUrlXs: require('@/assets/images/common/logo_header_xs.png'),
			register: false,
		}
	},
	computed: {
		...mapGetters(['isLogin' , 'name', 'avatar']),
		// 当前激活菜单的 index
		activeIndex() {
			return this.$route.name || 'Home' //  获取当前路由名称
		},
		isProductEnv() {
			return (
				process.env.NODE_ENV !== 'development'
			)
		},
		// 屏幕宽度
		screenWidth() {
			return this.$store.state.common.screenWidth
		}
	},
	created() {
		this.getIsRegister();
	},
	methods: {
		/**
		 * 退出登录
		 * @description 清除 cookie 存放的 token  并跳转到登录页面
		 */
		async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = process.env.VUE_APP_CONTEXT_PATH + "index";
        })
      }).catch(() => {});
    },
		getIsRegister(){
      const configId = "5"
      getConfig(configId).then(res=>{
        if(res.data.configValue === 'true'){
          this.register = true
        }else{
          this.register = false
        }
      })
    },
		index() {
			location.href = process.env.VUE_APP_CONTEXT_PATH + "index";  
		}
	}
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl';

.header-wrapper {
  width: 100%;
  padding: 0 20px;
  box-shadow: $tabBoxShadow;
  display: flex;

  .logo {
    margin: 14px 24px 0 24px;
    display: inline-block;
    height: 37px;
    cursor: pointer;
  }

  .logo-xs {
    display: none;
  }

  >>> .el-menu--horizontal {
    .el-menu-item:not(.is-disabled):hover {
      border-bottom-color: $Primary !important;
      background: $tabBackColor;
    }

    .external-link {
      padding: 0;
      a {
        display: block;
        padding: 0 20px;
      }
    }
  }

  .top-menu-list {
    flex: 1;

    .login, .register, .username, .exit, .user-exit-submenu {
      float: right;
    }
		.user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 10px;
					margin: 0 10px 0 10px;
        }
  }
}
</style>
